<template>
    <div class="data-statistics">
        <div class="module-title1">
            <div class="module-title_text">数据统计</div>
        </div>
        <div class="data-statistics_module module-container">
            <div class="chart" id="data-statistics_chart"></div>
        </div>
    </div>
</template>

<script>
const color = ['#227FDE', '#33DFE9']
import * as echarts from 'echarts'
import { setSize } from '@/utils/common'
import { getCarQueryCount, getPunchQueryCount } from '@/api/index.js'
export default {
    data() {
        return {
            myChart: null
        }
    },
    methods: {
        init () {
            const xAxis = []
            for (let key = 0; key <=7; key++) {
                xAxis.push(this.$moment().subtract((7 - key), 'd').format('MM-DD'))
            }
            console.log(xAxis)
            const option = {
                color: color,
                title: {
                    text: '单位(人)',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: setSize(12)
                    },
                    top: setSize(12),
                    left: setSize(30)
                },
                backgroundColor: 'rgba(0, 21, 37, 0.7)',
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    className: 'custom-tooltip',
                    formatter: params => {
                        let tooltips = ''
                        params.map((item) => {
                            tooltips = tooltips + 
                            `<div class='tooltip-container' style='display: flex; justify-content: space-between; align-items: center;'>
                                <span class='tooltip-sign' style='background-color:${color[item.seriesIndex]};'></span>
                                <div class='tooltip-name'>
                                    ${item.seriesName}
                                </div>
                                <div class='tooltip-value'>
                                    ${item.value}
                                </div>
                            </div>`
                        })
                        return tooltips
                    },
                },
                legend: {
                    data: ['人员', '车辆'],
                    top: setSize(13),
                    right: setSize(62),
                    textStyle: {
                        color: '#A1D5FF',
                        fontSize: setSize(12)
                    },
                    itemWidth: setSize(20), // 设置宽度
                    itemHeight: setSize(5), // 设置高度
                    itemGap: setSize(11) // 设置间距
                },
                xAxis: [
                    {
                        data: xAxis,
                        axisLabel: {
                            margin: setSize(10),
                            color: 'rgba(255,255,255,0.6)',
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#737F88',
                            }
                        },
                        axisTick: {
                            show: false
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: 'rgba(255, 255, 255, 0.6)',
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                width: setSize(1),
                                type: 'dotted',
                                color: 'rgba(70, 76, 131, 0.4)',
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '人员',
                        type: 'bar',
                        data: [],
                        barWidth: setSize(16),
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#227FDE' // 0% 处的颜色
                                    }, 
                                    {
                                        offset: 1,
                                        color: 'rgba(34,127,222,0)' // 100% 处的颜色
                                    }
                                ], false),
                            }
                        },
                    }, 
                    {
                        name: '车辆',
                        type: 'bar',
                        data: [],
                        barWidth: setSize(16),
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                [
                                    {
                                        offset: 0,
                                        color: '#33DFE9' // 0% 处的颜色
                                    }, 
                                    {
                                        offset: 1,
                                        color: 'rgba(51,223,233,0)' // 100% 处的颜色
                                    }
                                ], false),
                            }
                        },
                    }
                ]
            }
            const startTime = this.$moment().subtract(7, 'd').format('YYYY-MM-DD')
            const endTime = this.$moment().add(1, 'd').format('YYYY-MM-DD')
            const params = {
                startTime,
                endTime,
            }
            this.myChart = this.$echarts.init(document.getElementById('data-statistics_chart'))

            Promise.all([getPunchQueryCount(params), getCarQueryCount(params)]).then((res) => {
                if (res) {
                    if (res[0].data || res[1].data) {
                        option.series[0].data = res[0]?.data?.map((item) => item.personCount)
                        option.series[1].data = res[1]?.data?.map((item) => item.carCount)
                        console.log(option)
                        this.myChart.setOption(option)
                    }
                }
            })
        },
        disposeChart() {
            if (this.myChart) {
                this.myChart.dispose();
            }
        },
        initChart() {
            this.disposeChart();
            this.init();
        },
        setFontOption() {
            this.myChart.setOption({
                title: {
                    textStyle: {
                        fontSize: setSize(12)
                    },
                    top: setSize(12),
                    left: setSize(30)
                },
                legend: {
                    top: setSize(13),
                    right: setSize(62),
                    textStyle: {
                        fontSize: setSize(12)
                    },
                    itemWidth: setSize(20),
                    itemHeight: setSize(5),
                    itemGap: setSize(11)
                },
                xAxis: [
                    {
                        axisLabel: {
                            margin: setSize(10),
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                    }
                ],
                yAxis: [
                    {
                        axisLabel: {
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                width: setSize(1),
                            }
                        }
                    }
                ],
                series: [
                    {
                        barWidth: setSize(16),
                    }, 
                    {
                        barWidth: setSize(16),
                    }
                ]
            })
        },
        refreshChart() {
            if (!this.myChart) {
                return
            }
            this.myChart.resize();
            this.setFontOption();
        }
    },
    beforeDestroy() {
        this.disposeChart();
    },
    mounted () {
        this.initChart()
        window.addEventListener('resize', () => {
            this.refreshChart()
        })
    },
}
</script>

<style lang="less" scoped>
.data-statistics {
    margin-top: 19px;
    .data-statistics_module {
       width: 427px;
        height: 238px;
        margin-top: 7px; 
        .chart {
            width: 100%;
            height: 100%;
        }
    }
}
</style>